<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>windmill-Test</title>
    <style>
        body {
            margin: 0px;
            background-color: aquamarine;
            transform-style: preserve-3d;
        }

        .rotate {
            position: relative;
            margin: 50px auto;
            width: 200px;
            height: 200px;
            background-image: linear-gradient(to right, #000 50%, #fff 50%);
        }

        .btn_rotate {
            position: relative;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="rotate"></div>
    <button class="btn_rotate">点击停止或开启旋转</button>

    <script type="text/javascript" src="../src/tatu.js"></script>
    <script>
        const rotate = document.querySelector('.rotate');
        const btnRotate = document.querySelector('.btn_rotate');
        let flag = true;

        /*  windmill(): 风车动画---参数说明:
            参数一: htmlElement: 需要操作的html元素
            参数二: startDeg: 旋转起始角度，一般为0，类型number
            参数三: step: 旋转步数间隔数，数值越大旋转速度越快，类型number
            参数四: direction: 旋转方向，类型string
            参数五: n: 1为顺时针，-1为逆时针，默认值为1，类型number
            ------
            windmill(): 风车动画---返回值说明:
            返回一个对象，其包含stopWindmill方法， 该方法可以停止元素旋转
            object.stopWindmill()
            和包含openWindmill方法 该方法可以启动元素旋转
            object.openWindmill()
        */

        const stopa = windmill(rotate, 0, 2, 'z');
        btnRotate.addEventListener('click', () => {
            if (flag) {
                flag = false;
                stopa.stopWindmill();
            } else {
                flag = true;
                stopa.openWindmill();
            };
        });
    </script>
</body>

</html>